<template>
  <div class="searchPage">
    <div class="containerPart">
      <div class="titlePart">
        <span class="title">SCAU数信学院本科生通知检索</span>
        <el-switch
          v-model="choiceColor"
          active-color="#EBEEF5"
          inactive-color="#303133"
          active-text="日间模式"
          inactive-text="夜间模式"
          @change="setSkin"
        ></el-switch>
      </div>
    </div>
    <div class="inputPart">
      <el-autocomplete
        style="width:90%"
        v-model="curWords"
        :fetch-suggestions="querySearch"
        placeholder="请输入需要查询的通知"
        :trigger-on-focus="false"
        @select="handleSelect"
        prefix-icon="el-icon-search"
      ></el-autocomplete>
      <!-- <el-input v-model="curWords" placeholder="请输入需要查询的通知" prefix-icon="el-icon-search"></el-input> -->
      <el-button type="primary" style="margin-left:20px" @click="sendSearch" :loading="ifLoad">搜索</el-button>
    </div>
    <div class="resultPart">
      <div class="controlPart">
        <el-select
          v-model="curOpt"
          placeholder="请选择排序方式"
          @change="changeSelect"
          v-show="keyWords !== ''"
        >
          <el-option
            v-for="item in optionSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="curPage"
          @current-change="pageChange"
          style="float:right"
        ></el-pagination>
      </div>

      <el-card shadow="hover" v-for="(item,index) in resultList" :key="index" class="messagePart">
        <div class="detailPart">
          <div class="title" v-html="heightLight(item.title)"></div>
          <div class="date" v-html="heightLight(item.date)"></div>
          <div class="desc" v-html="heightLight(item.desc)"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import api from "@/api/index"
import pinyin from "pinyin-match"
// import $store from "./store/index" // 主题色
export default {
  data () {
    return {
      curPage: 1,
      ifLoad: false,
      keyWords: '',
      curWords: '',
      suggestList: [],
      resultList: [],
      total: 0,
      pageSize: 20,
      optionSelect: [{
        value: 0,
        label: '按相关性排序'
      }, {
        value: 1,
        label: '按时间排序'
      }],
      curOpt: 1,
      sortType: 1,
      choiceColor: true,
      skin: 'light'
    }
  },
  created () {

  },
  computed: {

  },
  mounted () {
    window.document.documentElement.setAttribute("data-theme", this.skin)
    this.getSuggestWords()
    this.postSearch()
  },
  methods: {
    sendSearch () { // 搜索
      this.ifLoad = true
      this.curPage = 1
      this.postSearch()
    },
    postSearch () { // 搜索接口
      api.postSearch({
        keyWords: '%' + this.curWords.replace(/\s*/g, "") + '%',
        curPage: this.curPage,
        sortType: this.sortType

      })
        .then((res) => {
          this.ifLoad = false
          if (!res) {
            return
          }
          if (res.data.status != 200) {
            this.$message({
              message: res.data.message,
              type: "warning",
            })
            return
          }
          this.resultList = res.data.data
          this.keyWords = res.data.splitKeyWords || ''
          this.total = res.data.total
          console.log("res.data", res.data)

        })
        .catch(() => {
          this.$message.error('资源获取错误！')
        })
    },
    pageChange (val) { // 分页
      this.curPage = val
      this.postSearch()

    },
    heightLight (str) { // 高亮关键词
      let reg = new RegExp(this.keyWords, 'ig')
      return str.replace(reg, (val) => {
        return `<span style="color:red">${val}</span>`
      })
    },
    changeSelect (i) { // 排序方式
      this.sortType = i
      this.postSearch()
    },
    getSuggestWords () { // 获取关键词列表
      api.getSuggestWords()
        .then((res) => {
          if (!res) {
            return
          }
          if (res.data.status != 200) {
            this.$message({
              message: res.data.message,
              type: "warning",
            })
            return
          }
          this.suggestList = res.data.data
          console.log("this.suggestList", this.suggestList)

        })
        .catch(() => {
          this.$message.error('资源获取错误！')
        })

    },
    querySearch (queryString, cb) { // 模糊匹配
      let results = queryString ? this.suggestList.filter(this.createFilter(queryString)) : this.suggestList
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) { // 拼音匹配
      return suggest => {
        return (pinyin.match(suggest.value, queryString))

      }
    },
    handleSelect (item) {
      this.curWords = item.value
      this.sendSearch()
      // console.log(item)
    },
    setSkin (val) {
      if (val == true) { //浅色模式
        this.skin = 'light'
      } else {
        this.skin = 'dark'
      }
      window.document.documentElement.setAttribute("data-theme", this.skin)
    }

  }

}
</script>
<style lang="scss" scoped>
@import '@/assets/_handle.scss';
.searchPage {
  @include background_color('bkgColor');
  overflow-x: hidden;
  .containerPart {
    @include background_color('mainColor');
    .titlePart {
      height: 80px;
      margin: 0 auto;
      width: 80%;
      @include font_color('mainTitleColor');
      line-height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 28px;
        font-weight: 700;
        margin-right: 15px;
      }
    }
  }
  .inputPart {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 30px auto;
    width: 80%;
  }
  .resultPart {
    margin: 0px auto;
    width: 80%;
    .controlPart {
      height: 40px;
      margin-bottom: 20px;
    }
    .messagePart {
      margin-bottom: 16px;
      border: 1px solid;
      @include border_color('borderColor');
      @include background_color('cardbkgColor');
      height: 150px;
      width: 100%;
      // ::v-deep .el-card.is-hover-shadow:hover {
      //   border: 1px solid rgb(121, 187, 255) !important;
      //   // border: 1px solid black !important;
      //   // @include border_color('cardBorderColor');
      //   @include background_color('lightColor');
      //   box-shadow: none;
      // }
      .detailPart {
        .title {
          font-size: 17px;
          font-weight: 700;
          @include font_color('titleColor');
          // color: $titleColor;
        }
        .date {
          font-size: 14px;
          margin: 5px auto;
          @include font_color('textColor');
          // color: $textColor;
        }
        .desc {
          font-size: 16px;
          @include font_color('textColor');
          // color: $textColor;
        }
      }
    }
  }
}
// ::v-deep .el-card.is-hover-shadow:hover {
//   border: 1px solid rgb(121, 187, 255) !important;
//   // border: 1px solid black !important;
//   // @include border_color('cardBorderColor');
//   @include background_color('lightColor');
//   box-shadow: none;
// }
::v-deep .el-switch__label {
  color: transparent;
}
::v-deep .el-switch__label.is-active {
  color: #fff;
}
</style>